<template>
  <BasicTable @register="registerTable" :showIndexColumn="false">
  </BasicTable>
</template>
<script lang="ts" setup>
import { BasicTable, useTable } from '@/components/Table';
import { watch, onMounted } from "vue";
import { getMergedColumns } from '@/utils/tableUtil'

const props = defineProps({
  loading: { type: Boolean },
})

onMounted(() => {
  setLoading(true);
})

watch(
  () => props.loading,
  (val) => {
    setLoading(val);
  },
);

const [registerTable, { setColumns, setTableData, setLoading }] = useTable({
  title: '本周期数据环对比',
  columns: [],
  pagination: false,
});

const formatHeader = (headerData, tableData) => {
  const headerList = headerData.map(item => ({
    title: item,
    dataIndex: item,
    width: 100
  }))
  headerList.unshift(
    {
      title: '数据名称',
      dataIndex: 'classifyName',
      width: 120,
      fixed: 'left',
      merge: true,
    }, {
    title: '数据周期',
    dataIndex: 'itemName',
    width: 120,
    fixed: 'left'
  })
  headerList.push({
    title: '总计',
    dataIndex: 'totalCount',
    width: 120,
    fixed: 'right'
  })
  const mergedColumns = getMergedColumns(headerList, tableData);
  setColumns(mergedColumns);
}

const formatTableData = (tableData) => {
  const data = tableData.map((item) => {
    const { dataMap, ...others } = item
    return {
      ...dataMap, ...others
    }
  })
  setTableData(data)
  return data
}

const setData = (header, tableData) => {
  const formatData = formatTableData(tableData)
  formatHeader(header, formatData)
}


defineExpose({
  setData
})


</script>
